<template>
  <div class="v3c">
    <!-- 天 -->
    <div class="mt-15">
      <div>星期</div>
      <el-select v-model="state.week.specificSpecific" multiple style="width: 140px">
        <el-option
          v-for="(item, index) in weekList"
          :key="index"
          :label="item.name"
          :value="item.value"
        />
      </el-select>
    </div>
    <!-- 小时 -->
    <div class="mt-15">
      <div>小时</div>
      <el-input-number
        v-model="state.hour.rangeStart"
        :min="0"
        :max="23"
        controls-position="right"
      />
      <span>时到</span>
      <el-input-number v-model="state.hour.rangeEnd" :min="0" :max="23" controls-position="right" />
    </div>
    <!-- 结果 -->
    <div class="v3c-footer">
      <div style="flex: 1">
        CRON &nbsp;: &nbsp;&nbsp;<span class="cron">{{ cron }}</span>
        &nbsp; &nbsp; &nbsp;
        <button class="btn-ok" @click="handleClick">生成cron</button>
        <button @click="rest">重置</button>
        <button class="btn-ok" @click="test">测试</button>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, computed, defineComponent } from 'vue'

export default defineComponent({
  name: 'Vue3Cron',
  setup(_, { emit }) {
    const weekList = [
      { name: '星期一', value: 'MON', val: 2 },
      { name: '星期二', value: 'TUE', val: 3 },
      { name: '星期三', value: 'WED', val: 4 },
      { name: '星期四', value: 'THU', val: 5 },
      { name: '星期五', value: 'FRI', val: 6 },
      { name: '星期六', value: 'SAT', val: 7 },
      { name: '星期日', value: 'SUN', val: 1 }
    ]

    const state = reactive({
      hour: { rangeStart: 0, rangeEnd: 0 },
      week: { specificSpecific: [] }
    })

    const selectedValuesText = (selectedValues) => selectedValues.join(',')
    const selectedValuesCOM = (num1, num2) => num1 + '-' + num2

    const cron = computed(() => {
      const hoursText = selectedValuesCOM(state.hour.rangeStart, state.hour.rangeEnd)
      const weeksText = selectedValuesText(state.week.specificSpecific)
      return `${'0/10'} ${'*'} ${hoursText || '*'} ? * ${weeksText || '*'} *`
    })

    const handleClick = () => console.log(state)

    const test = (data) => {
      // console.log(data)
      const startTime = parseInt(data.Start.substring(0, 2))
      const endTime = parseInt(data.end.substring(0, 2))
      state.week.specificSpecific = data.day.length === 7 ? [] : data.day
      state.hour.rangeStart = startTime
      state.hour.rangeEnd = endTime
      // console.log(startTime, endTime)
      return cron.value
    }

    const rest = () => {
      state.hour = { rangeStart: 0, rangeEnd: 0 }
      state.week = { specificSpecific: [] }
    }

    return {
      weekList,
      state,
      cron,
      handleClick,
      rest,
      test
    }
  }
})
</script>
  
  <style lang="css" scoped>
.btn-ok {
  line-height: 1.5715;
  position: relative;
  display: inline-block;
  font-weight: 400;
  white-space: nowrap;
  text-align: center;
  background-image: none;
  border: 1px solid transparent;
  box-shadow: 0 2px #00000004;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  touch-action: manipulation;
  height: 32px;
  padding: 4px 15px;
  font-size: 14px;
  border-radius: 2px;
  color: #fff;
  background: #409eff;
  border-color: #409eff;
  text-shadow: 0 -1px 0 rgb(0 0 0 / 12%);
  box-shadow: 0 2px #0000000b;
}
</style>
  